<template>
	<view class="scenic-info" v-if="scenicData">
		<view class="fs-40 font-600 c-black-_9 flex-a mb-16">
			{{ scenicData.name }}
			<view class="title-right ml-8 fs-20 font-normal" v-if="scenicData.quality_level > 0">
				{{ scenicData.quality_level_name }}
			</view>
		</view>
		<view class="mb-16 c-grey-86 text-ellipsis" v-if="scenicData.specialty">
			{{ scenicData.specialty }}
		</view>
		<view class="info-row flex-a">
			<view class="comment-on">
				<view class="score">{{ scoreInCent(scenicData.score_in_cent) }}</view>
				<view class="text">400条点评</view>
				<image :src="imgBaseUrl + 'icon-right.png'" class="icon-16 ml-4"></image>
			</view>
			<koubei-rank
				v-if="scenicData.hot_list_id > 0"
				:hot_list_id="scenicData.hot_list_id"
				:hot_list_name="scenicData.hot_list_name"
				:hot_list_ranking="scenicData.hot_list_ranking"
			></koubei-rank>
		</view>
		<view class="divider"></view>
		<view class="intro-row">
			<view class="intro-left flex-a">
				<text class="status" :class="[scenicData.opening ? 'open' : 'close']">
					{{ scenicData.opening_name }}
				</text>
				<text class="c-grey-4e ml-8">
					{{ formatHourMinute(scenicData.open_time) }}-{{ formatHourMinute(scenicData.close_time) }}开放 （{{
						formatHourMinute(scenicData.stop_entry_time)
					}}停止入园）
				</text>
			</view>
			<view class="flex-a" @click.stop="navigateTo(`/pages/hy/scenic/intro?id=${scenicData.id}`)">
				<view class="text">景区简介</view>
				<image :src="imgBaseUrl + 'icon-right.png'" class="icon-16 ml-4 mt-2" />
			</view>
		</view>
		<view class="address-row space-between flex-a" v-if="scenicData.address">
			<view class="text text-ellipsis">{{ scenicData.address }}</view>
			<view class="flex-a">
				<view
					class="navigation"
					@click.stop="
						openLocation({
							name: scenicData.name,
							address: scenicData.address,
							latitude: scenicData.latitude,
							longitude: scenicData.longitude,
						})
					"
				>
					<view class="icon-navigation">
						<up-image :src="imgBaseUrl + 'icon-navigation.png'" width="40rpx" height="40rpx"></up-image>
					</view>
					<view class="text-navigation">导航</view>
				</view>
				<view class="tel" @click.stop="handleTelClick">
					<view class="icon-tel">
						<up-image :src="imgBaseUrl + 'icon-tel.png'" width="40rpx" height="40rpx"></up-image>
					</view>
					<view class="text-tel">联系</view>
				</view>
				<up-action-sheet
					:actions="scenicData.phone_list"
					@select="callPhone"
					title="联系电话"
					:show="showPhoneSheet"
					:closeOnClickOverlay="true"
					@close="closePhoneSheet"
				></up-action-sheet>
			</view>
		</view>
		<view class="notice-wrap fs-24" v-if="scenicData.notice">
			<view class="flex-a">
				<view class="bd-right flex-a">
					<image :src="imgBaseUrl + 'icon-notice.png'" class="icon-32" />
					<image :src="imgBaseUrl + 'notice-text.png'" class="notice-text" />
				</view>
			</view>
			<swiper :circular="true" :vertical="true" class="notice-swiper">
				<swiper-item v-for="item in [scenicData.notice]" :key="item.id">
					<view class="notice-item" @click.stop="handleNoticeClick">
						<text class="c-black-1d ml-32 flex-1 text-ellipsis">
							{{ item?.title }}
						</text>
						<text class="arrow-right ml-8"></text>
					</view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>
<script setup lang="ts">
import { navigateTo } from "@/utils/page-redirect"
import { openLocation } from "@/utils/location"
import { dataToDate, formatHourMinute, phoneCall, scoreInCent } from "@/mixins/mixins"
import KoubeiRank from "@/pages/hy/scenic/components/koubei-rank.vue"
const imgBaseUrl = inject("imgBaseUrl")

const props = defineProps({
	scenicData: {
		type: Object as () => any,
		default: () => null,
	},
})
const emit = defineEmits(["handleShowNotice", "handleShowPhone"])

const noticePopupShow = ref(false)
const handleNoticeClick = () => {
	noticePopupShow.value = true
	emit("handleShowNotice", true)
}

// 点击联系电话
const showPhoneSheet = ref(false)
const handleTelClick = () => {
	showPhoneSheet.value = true
	emit("handleShowPhone", true)
}
const closePhoneSheet = () => {
	showPhoneSheet.value = false
	emit("handleShowPhone", false)
}
const callPhone = (index: any) => {
	phoneCall(index.name)
}
</script>
<style lang="scss" scoped>
.scenic-info {
	padding: 32rpx 24rpx 0;
	display: flex;
	flex-direction: column;
	border-radius: 16rpx;
	background-color: #fff;
	margin-bottom: 16rpx;

	.title-right {
		padding: 3rpx 8rpx;
		color: #4e5969;
		width: 42rpx;
		margin-top: 4rpx;
		background: #eef1f4;
		border-radius: 8rpx;
	}
	.info-row {
		.comment-on {
			display: flex;
			align-items: center;
			margin-right: 12rpx;
			border-radius: 36rpx;
			padding-right: 8px;
			background: rgba(255, 87, 24, 0.08);

			.score {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 64rpx;
				height: 36rpx;
				font-size: 26rpx;
				font-weight: 900;
				background: linear-gradient(90deg, #ff7229 0%, #ff5416 100%);
				border-radius: 18rpx 0 18rpx 18rpx;
				color: #fff;
			}

			.text {
				margin-left: 22rpx;
				font-size: 24rpx;
				font-weight: normal;
				color: #1d2129;
			}
		}
	}

	.divider {
		width: 100%;
		height: 1rpx;
		background: #e9eaee;
		margin: 24rpx 0;
	}

	.intro-row {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 24rpx;

		.intro-left {
			.status {
				font-weight: 500;
				&.open {
					color: #00b42a;
				}
			}
		}
	}

	.address-row {
		background: url($imgBaseUrl + "location-bg.png") no-repeat center center;
		background-size: cover;
		padding: 24rpx 16rpx;
		margin-bottom: 24rpx;

		.text {
			max-width: 430rpx;
			color: #000000;
		}

		.navigation {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 36rpx;

			.text-navigation {
				font-size: 20rpx;
				font-weight: normal;
				color: rgba(0, 0, 0, 0.9);
				margin-left: 8rpx;
			}
		}

		.tel {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-left: 24rpx;

			.text-tel {
				font-size: 20rpx;
				font-weight: normal;
				color: rgba(0, 0, 0, 0.9);
				margin-left: 8rpx;
			}
		}
	}

	.notice-wrap {
		margin-bottom: 24rpx;
		padding: 14rpx 24rpx;
		background: rgba(254, 224, 56, 0.08);
		height: 56rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.notice-text {
			width: 50rpx;
			height: 24rpx;
			margin-left: 4rpx;
		}

		.notice-swiper {
			flex: 1;
			height: 100%;

			swiper-item {
				display: flex;
				flex-direction: column;
				justify-content: center;
			}

			.notice-item {
				display: flex;
				align-items: center;
			}

			.notice-time {
				margin-left: 28rpx;
				color: $c-grey-86;
			}
		}

		.bd-right {
			position: relative;

			&::before {
				position: absolute;
				content: "";
				right: -16rpx;
				top: 6rpx;
				bottom: 6rpx;
				width: 2rpx;
				background: rgba(134, 144, 156, 0.3);
			}
		}
	}
}
</style>
